<template>
    <div class='content'>
        <div class="profile_page">
                <head-top  :go-back='goBack'  :head-title="profiletitle"></head-top>
        </div>
         <div class="formContain">
           <div class="evaluateLists" v-for="item in planDatas">
             <div class="evaluateList">
               <div class="itemTitle">
                 <p>{{item.planName}}</p>
                 <span>{{item.startDate}} - {{item.endDate}}</span>
               </div>
               <div class="itemDate">
                 <p class="itemDateP">
                   <img src="@/assets/images/platform/eva_time.png" alt="">
                   <span>{{item.planYear}}</span>
                 </p>
                 <p class="itemDateP">
                   <img src="@/assets/images/platform/eva_date.png" alt="">
                   <span>{{item.planDateName}}</span>
                 </p>
                 <p class="itemDateP">
                   <img src="@/assets/images/platform/eva_month.png" alt="">
                   <span>{{item.planTypeName}}</span>
                 </p>
               </div>
               <div class="itemState">
                 <div>
                   <div class="itemName" style="width: 100%;justify-content: flex-start;">
                     <p class="kpName">考评单位：</p>
                     <span class="kpCon" style="width: 10rem">{{item.orgName}}</span>
                   </div>

                 </div>
                 <div style="margin-top: 0.6rem">
                     <div class="itemName">
                         <p class="kpName">计划状态：</p>
                         <span class="kpCon">{{item.planStatusName}}</span>
                     </div>
                   <div class="itemName">
                     <p class="kpName">考评对象：</p>
                     <span class="kpCon">{{item.evaTargetType}}</span>
                   </div>
                 </div>
               </div>
               <div class="itemBtn">
                 <span class="noFin"></span>
                 <div class="itemAction" style="background: #ccc">操作</div>
               </div>
             </div>
           </div>
             <van-empty v-if="planDatas.length == 0" description="暂无数据" />
         </div>
    </div>
</template>

<script>
    import headTop from '@/components/header/head'
     import titlebar from '@/components/titlebar3/titlebar3';
    import {getHisQueryPlan} from '@/service/getData';
    import {getStore,getDefault} from '@/assets/config/mUtils';
    import {mapState, mapMutations} from 'vuex'
    import { Dialog,Toast} from 'vant';
    export default {
    	data(){
            return{
                profiletitle:'绩效考评历史',
                goBack:true,
                titleLeft:'',
                screenHeight:'',
	            planDatas:[],
            }
        },
        created(){

        },
        mounted(){
            this.screenHeight = document.documentElement.clientHeight;
	        var data = {};
	        data.app_userId = getStore('user_id');
	        data.userId = getStore('user_id');
	        data.CHECK_TIME = new Date().getTime().toString();
	        data.CHECK_SIGN = this.$md5(data.userId + data.CHECK_TIME + "3a28fba00c015e0df7f88556c91cb7fc");
	        getHisQueryPlan(data).then(res=>{
		        var data = res.data;
		        this.planDatas = data;
	        });
        },
        components:{
            headTop,
            titlebar
        },
      updated () {
        let that = this;
        this.$nextTick(function () {
          let $inputs = Array.from(document.getElementsByTagName('input'));
          /*let body = document.body;
          $inputs.forEach(item => { // 定时器是处理多个input间快速切换闪屏问题，可省略
              item.onblur = function () { // onblur是核心方法
                  clearTimeout(body.timer);
                  body.timer = setTimeout(() => {
                  window.scroll(0, 0);
                  window.innerHeight = window.outerHeight = that.screenHeight
                  }, 150)
              }
              item.onfocus = function () {
                  clearTimeout(body.timer)
              }
          })*/
          let body = document.body;
          $inputs.forEach(item => {
            item.onblur = function () { // onblur是核心方法
              window.scroll(0, 0);
              window.innerHeight = window.outerHeight = that.screenHeight;
              //console.log(that.screenHeight);
            }
          })
        })
      },
        methods:{
	        ...mapMutations([
		        'SAVE_PLANID',
	        ]),
	        selectScheme(id){
	        	console.log(id);
	        	this.SAVE_PLANID(id);
		        this.$router.push({
			        path: '/selectScheme',
		        })
            },
	        historyView(){

            }
        }
    }

</script>

<style lang="scss" scoped>
    @import '../../../assets/style/mixin';
    @import '../../../assets/style/public';
    .evaluateList{
      margin: 0.4rem 0.5rem;
      background: #fff;
      border-radius: 0.2rem;
      padding:0.2rem 0.4rem 0.4rem;
      .itemTitle{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        p{
          color: #000;
          font-size: 1rem;
          font-weight: 500;
            width: 12rem;
        }
        span{
          color: #666;
          font-size: 0.48rem;
            width: 9rem;
            margin-left: 0.3rem;
        }
      }
      .itemDate{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.5rem;
        .itemDateP{
          width: 33%;
          display: flex;
          flex-direction: row;
          align-items: center;
          img{
            width:0.8rem ;
            margin-right: 0.5rem;
          }
          span{
            color: #666;
            font-size: 0.45rem;
          }
        }
      }
      .itemState{
        margin-top: 0.5rem;
        background: #F5F5F5;
        border-radius: 0.3rem;
        padding: 0.3rem;
        div{
          display: flex;
          flex-direction: row;
          align-items: center;
          .itemName{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            width: 50%;
            .kpName{
              font-size: 0.54rem;
              color: #333;
              font-weight:500;
            }
            .kpCon{
              font-size: 0.48rem;
              color: #333;
              font-weight: 400;
              width: 4rem;
            }
          }
        }

      }
      .itemBtn{
        margin-top: 0.8rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .noFin{
          font-size: 0.7rem;
          color: #999;
          margin-left: 0.3rem;
        }
        .itemRed{
          color: #E50010;
        }
        .itemAction{
          width: 4rem;
          height: 1.3rem;
          line-height: 1.3rem;
          font-size: 0.7rem;
          background: #E50010;
          text-align: center;
          color: #fff;
          border-radius: 0.8rem;
        }
      }
    }
    /deep/  #yearPicker .van-picker__columns>div:nth-of-type(2){
    display: none;
  }
    .onReadBtn{
        position: absolute;
        top: -2rem;
        right: 0.4rem;
        width: 3rem;
        text-align: center;
        height: 1rem;
        line-height: 1rem;
        z-index: 99999999999999;
        color: #fff;
        border-radius: 8px;
        font-size: 0.58rem;
        border: 1px solid #fff;
    }
</style>
